import React,{Fragment} from "react";
import Header from "./include/header";
import Bottom from "./include/bottom";
import {Button, Empty, SideBar, Swiper, Toast} from "antd-mobile";

/*
分类
 */
class App extends React.Component {

    categories = [
        {
            id:1,
            title:"饺子混沌",
            goods: [
                {
                    id:1,
                    name: "清汤混沌儿",
                    price: 10,
                    image:"/static/media/image2/6.jpg",
                },
                {
                    id:2,
                    name: "海鲜混沌儿",
                    price: 11,
                    image:"/static/media/image2/7.jpg",
                },
                {
                    id:3,
                    name: "奥力给味儿饺子",
                    price: 56.5,
                    image:"/static/media/image2/8.jpg",
                },
                {
                    id:4,
                    name: "西八饺子",
                    price: 45,
                    image:"/static/media/image2/9.jpg",
                },
            ]
        },
        {
            id:2,
            title:"汉堡薯条",
            goods: [
                {
                    id:5,
                    name: "奥力给薯条儿",
                    price: 16,
                    image:"/static/media/image2/2.jpg",
                },
                {
                    id:6,
                    name: "不好吃的薯条儿",
                    price: 20,
                    image:"/static/media/image2/1.jpg",
                },
                {
                    id:7,
                    name: "大虾堡儿",
                    price: 56.5,
                    image:"/static/media/image2/3.jpg",
                },
                {
                    id:8,
                    name: "板烧堡儿",
                    price: 45,
                    image:"/static/media/image2/4.jpg",
                },
                {
                    id:9,
                    name: "牛宝",
                    price: 12,
                    image:"/static/media/image2/5.jpg",
                },
            ]
        },
        {
            id:3,
            title:"煮面披萨",
            goods: [
                {
                    id:10,
                    name: "我说实话必胜客的难吃披萨",
                    price: 10,
                    image:"/static/media/image2/10.jpg",
                },
                {
                    id:11,
                    name: "锤子披萨",
                    price: 11,
                    image:"/static/media/image2/11.jpg",
                },
                {
                    id:12,
                    name: "难吃的披萨",
                    price: 56.5,
                    image:"/static/media/image2/12.jpg",
                },
                {
                    id:13,
                    name: "牛肉面",
                    price: 45,
                    image:"/static/media/image2/13.jpg",
                },

            ]

        },
        {
            id:4,
            title:"包子粥店",
            goods: [
                {
                    id:14,
                    name: "包子",
                    price: 10,
                    image:"/static/media/image2/baozi.jpg",
                },
                {
                    id:15,
                    name: "小米粥ovo",
                    price: 11,
                    image:"/static/media/image2/xiaomizhou.jpg",
                },
                {
                    id:16,
                    name: "粥",
                    price: 11,
                    image:"/static/media/image2/15.jpg",
                },
                {
                    id:17,
                    name: "包子",
                    price: 11,
                    image:"/static/media/image2/14.jpg",
                },
            ]
        },
        {
            id:5,
            title:"快餐便当",
            goods: [
                {
                    id:18,
                    name: "快餐",
                    price: 11,
                    image:"/static/media/image2/16.jpg",
                },
                {
                    id:19,
                    name: "便当",
                    price: 11,
                    image:"/static/media/image2/17.jpg",
                },
            ]
        },
        {
            id:6,
            title:"米粉面馆",
            goods: [
                {
                    id:20,
                    name: "米粉",
                    price: 11,
                    image:"/static/media/image2/18.jpg",
                },
                {
                    id:21,
                    name: "米粉",
                    price: 11,
                    image:"/static/media/image2/19.jpg",
                },
            ]
        },
        {
            id: 7,
            title: "麻辣烫冒菜",
            goods: [
                {
                    id: 22,
                    name: "麻辣烫",
                    price: 11,
                    image: "/static/media/image2/19.jpg",
                },
                {
                    id: 23,
                    name: "冒菜",
                    price: 11,
                    image: "/static/media/image2/20.jpg",
                },
            ]
        },
]

    constructor(props) {
        super(props);

        this.state = {
            categories: this.categories,
            goodses: this.categories[0].goods
        }

    }

    //添加商品到购物车
    addShoppingCar(goods) {
        let shoppingCarData = sessionStorage.getItem("shoppingCar_"+goods.id);
        if (shoppingCarData === null) {
            sessionStorage.setItem("shoppingCar_" + goods.id, JSON.stringify(goods));
            Toast.show({
                icon: 'success',
                content: '添加成功',
            })
        } else {
            Toast.show({
                icon: 'fail',
                content: '添加失败，已存在该商品',
            })
        }
    }


    render() {
        return (
            <div className={"categoryApp"}>
                <Header name={"商品分类"}/>
                <div className={"middle"}>
                    <div className={"category"}>
                        <SideBar onChange={
                            key=>{
                                for (const category of this.categories) {
                                    if (category.id === parseInt(key)) {
                                        this.setState({
                                            goodses: category.goods
                                        })
                                        break;
                                    }
                                }
                            }
                        }>
                            {this.state.categories.map(category => (
                                <SideBar.Item key={category.id} title={category.title} />
                            ))}
                        </SideBar>
                    </div>
                    <div className={"goods"}>
                        {this.state.goodses.length > 0 ?
                            <Fragment>
                                {this.state.goodses.map(goods=>
                                    <div className={"goodsItem"} key={goods.id}>
                                        <img src={goods.image} alt={""}/>
                                        <span className={"goodsInfo"}>
                                        <span className={"title"}>{goods.name}</span><br/>
                                        <span className={"price"}>￥{goods.price.toFixed(2)}</span><br/>
                                        <Button color='primary' size='small' onClick={
                                            ()=>{
                                                this.addShoppingCar(goods);
                                            }
                                        }>加入购物车</Button>
                                    </span>
                                    </div>
                                )}
                            </Fragment>:
                            <Empty description='暂无商品' />}
                    </div>
                </div>
                <Bottom history={this.props.history}/>
            </div>
        )
    }

}

export default App;

